<template>
    <div class="taskstatiscal_container">
        <div class="card">
            <div class="title-text">
                <div class="title-desc">任务种类</div>
                <el-button
                    class="title-btn"
                    :icon="isClose ? ArrowDownBold : ArrowUpBold"
                    type="text"
                    @click="handleClose">
                    {{ isClose ? '收起' : '展开' }}
                </el-button>
            </div>
            <div class="line"></div>
            <div v-show="isClose" class="new-task">
                <div v-for="item in taskType" :key="item.id" class="task-item">
                    <div class="item-title">
                        <div class="title-left">
                            <el-image class="task-img" :src="item.img"></el-image>
                            <div class="task-text">{{ item.name }}</div>
                        </div>
                        <el-button v-auth="item.authCode" type="primary" @click="creatTask(item.id)">
                            创建任务
                        </el-button>
                    </div>
                    <div class="task-desc">{{ item.desc }}</div>
                </div>
            </div>
        </div>
        <div class="conten-card" shadow="never">
            <el-tabs v-model="activeName" @tab-change="switchTab">
                <el-tab-pane
                    v-for="item in tabList"
                    :key="item.value"
                    :label="item.label"
                    :name="item.value"></el-tab-pane>
            </el-tabs>
            <ZwSearchForm
                ref="searchRef"
                row-num="3"
                :option="searchOption"
                @search="search"
                @reset="reset"
                @expand="getTableH">
            </ZwSearchForm>
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :fetch-params="state.searchParams"
                :fetch-api="fetch()">
                <template #headerOperate>
                    <el-button v-auth="AUDIT_SET" plain class="table-btn" @click="auditSet">审核设置</el-button>
                    <el-dropdown popper-class="drop_customer">
                        <el-button type="primary">新建任务</el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-auth="ADD_PHONE_MARKET" @click="creatTask(1)">
                                    新建电话销售
                                </el-dropdown-item>
                                <el-dropdown-item v-auth="ADD_CUSTOMER_VISIT" divided @click="creatTask(2)">
                                    新建客户拜访
                                </el-dropdown-item>
                                <el-dropdown-item v-auth="ADD_ENTERPRISE_WECHAT" divided @click="creatTask(3)">
                                    新建企微招募
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </ZwTable>
        </div>
        <!--审核设置-->
        <auditSetting ref="auditRef"></auditSetting>
        <!--执行明细-->
        <executionDetail ref="executionRef"></executionDetail>
    </div>
    <!--线索转化-->
    <cueInfo ref="cueInfoRef"></cueInfo>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'TASK_MANAGE' });
</script>

<script lang="tsx" setup>
import { ref, reactive, computed, onMounted, watch, nextTick, onActivated } from 'vue';
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';
import { taskList } from '@/api/employe/employeetasks/taskmanage';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import auditSetting from './components/auditSetting.vue';
import executionDetail from './components/executionDetail.vue';
import cueInfo from './components/cueInfo.vue';
import router from '@/router';
import { deepCopy } from '@/utils/helper';
import { dividerProps, ElButton, ElMessage, ElPopover, ElProgress } from 'element-plus';
import { tableH, reSize } from '@/utils/utils';
const goTongji = (id: number) => {
    router.push('/employee/employeetasks/taskmanage/taskstatiscal?id=' + id);
};
const DialogRef = ref(null);
const tableRef = ref(null);
const auditRef = ref(null);
const executionRef = ref<any>(null);
const cueInfoRef = ref<any>(null);
const searchRef = ref(null);
const isClose = ref(false);
const taskType = reactive([
    {
        id: 1,
        authCode: 'ADD_PHONE_MARKET',
        name: '电话销售',
        img: '/static/employeetasks/phone.png',
        desc: '企业通过员工任务指派员工进行电话销售，通过客户评级及标签为客户分层，进一步转化有意向的客户。'
    },
    {
        id: 2,
        name: '客户拜访',
        authCode: 'ADD_CUSTOMER_VISIT',
        img: '/static/employeetasks/person.png',
        desc: '企业通过员工任务指派员工客户线下拜访，跟踪员工客户拜访情况，标记客户合作意愿。'
    },
    {
        id: 3,
        name: '企微招募',
        authCode: 'ADD_ENTERPRISE_WECHAT',
        img: '/static/employeetasks/wechat.png',
        desc: '企业通过该任务，为客户分配加微任务，跟踪员工加微情况，标记客户意向。'
    }
]);
const activeName = ref('2');

const requestFlag = ref<boolean>(false);
const currentParams = ref<any>(null);

const defaultParams = reactive({
    status: activeName.value,
    name: '',
    type: '',
    effect_time: [],
    work_user_list: [],
    task_status: ''
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const tabList = ref([
    { label: '全部', value: '-1' },
    { label: '未开始', value: '1' },
    { label: '进行中', value: '2' },
    { label: '已结束', value: '3' }
]);
const executor = {
    color: '#000000',
    ['font-size']: '12px'
};
const searchOption = computed(() => {
    return [
        {
            label: '任务名称',
            name: 'name',
            value: '',
            type: 'input',
            placeholder: '请输入任务名称搜索'
        },
        {
            label: '任务种类',
            name: 'type',
            value: '',
            type: 'select',
            placeholder: '请选择任务种类',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        {
                            name: '电话销售',
                            id: 1
                        },
                        {
                            name: '客户拜访',
                            id: 2
                        },
                        {
                            name: '企微招募',
                            id: 3
                        }
                    ]);
                });
            },
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '任务有效期',
            name: 'effect_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        },
        {
            label: '执行员工',
            name: 'work_user_list',
            value: [],
            type: 'select',
            placeholder: '请选择员工',
            multiple: true,
            popperClass: 'zw-hide_select_option',
            isUserSelect: true,
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '完成情况',
            name: 'task_status',
            value: '',
            type: 'select',
            placeholder: '请选择任务状态',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        {
                            name: '全部',
                            id: -1
                        },
                        {
                            name: '已完成',
                            id: 1
                        },
                        {
                            name: '未完成',
                            id: 2
                        },
                        {
                            name: '超时完成',
                            id: 3
                        },
                        {
                            name: '超时未完成',
                            id: 4
                        }
                    ]);
                });
            },
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        }
    ];
});
const creatTask = (val: any) => {
    router.push('/employee/employeetasks/taskmanage/createtask?val=' + val);
};
const tableOption = [
    {
        prop: 'name',
        label: '任务名称',
        minWidth: 250,
        render({ row }: any) {
            return (
                <div>
                    <span>{row.name}</span>
                    <ElProgress
                        color={row.type == 1 ? '#FE6A6A' : row.type == 2 ? '#5292f7' : '#5AB8F9'}
                        percentage={row.per}
                        status={row.per == 100 ? 'success' : ''}></ElProgress>
                </div>
            );
        }
    },
    {
        prop: 'type',
        label: '任务种类',
        width: 150,
        render({ row }: any) {
            let text: any = '';
            text = row.type == 1 ? '电话销售' : row.type == 2 ? '客户拜访' : '企微招募';
            return text;
        }
    },
    {
        prop: 'effect_time',
        label: '任务有效期',
        width: 330,
        render({ row }: any) {
            let text: any = '';
            text = row.effect_time[0] + ' ~ ' + row.effect_time[1];
            return text;
        }
    },
    {
        prop: 'object_class',
        label: '分配机制',
        minWidth: 250,
        render({ row }: any) {
            if (row.object_class == 1) {
                let text1: any = '';
                text1 = row.dis_rule == 1 ? '单次' : '周期';
                let text2: any = '';
                text2 = row.dis_type == 1 ? '平均' : '随机';
                if (row.dis_rule == 1) {
                    return `${text1}任务 ${text2}分配`;
                } else {
                    return `${row.cycle_date}${text2}分配${row.cycle_num}个 预计执行${row.exec_day}${
                        row.cycle_unit == 1 ? '日' : row.cycle_unit == 2 ? '周' : '月'
                    }`;
                }
            } else {
                if (row.entry_day_switch == 2) {
                    return `员工录入 预计录入${row.entry_user_num}人`;
                } else if (row.entry_user_switch == 2) {
                    return `员工录入 每日录入${row.entry_day_num}人`;
                } else {
                    return `员工录入 每日录入${row.entry_day_num}人 预计录入${row.entry_user_num}人`;
                }
            }
        }
    },
    {
        prop: 'is_all',
        label: '执行员工',
        width: 200,
        render({ row }: any) {
            const slotReference = () => (
                <span>{`${row.exec_staff[0]}、${row.exec_staff[1]}、${row.exec_staff[2]}等${row.exec_staff.length}人`}</span>
            );
            const slotDefault = () => (
                <div>
                    {row.exec_staff.map((item: any, index: any) => {
                        return (
                            <span style={executor}>
                                {item}
                                <span v-show={row.exec_staff.length - 1 !== index}>、</span>
                            </span>
                        );
                    })}
                </div>
            );
            if (row.is_all == 1) {
                return '全部员工';
            } else {
                if (row.exec_staff.length > 3) {
                    return (
                        <div>
                            <ElPopover
                                popper-class="popGroup"
                                trigger="hover"
                                vSlots={{ reference: slotReference, default: slotDefault }}
                                width={300}
                                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"></ElPopover>
                        </div>
                    );
                } else {
                    return (
                        <div>
                            {row.exec_staff.map((item: any, index: any) => {
                                return (
                                    <span>
                                        {item}
                                        <span v-show={row.exec_staff.length - 1 !== index}>、</span>
                                    </span>
                                );
                            })}
                        </div>
                    );
                }
            }
        }
    },
    {
        prop: 'total_num',
        label: '客户总数/已分配/已完成',
        width: 200,
        render({ row }: any) {
            let text: any = '';
            text = `${row.total_num}/${row.dis_num}/${row.complete_num}`;
            return text;
        }
    },
    {
        prop: 'created_uid_name',
        label: '创建人',
        width: 200
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 200
    },
    {
        prop: 'operate',
        label: '操作',
        width: 260,
        fixed: 'right',
        isOperate: true,
        renderOperate({ row }: any) {
            return (
                <div>
                    <ElButton size="small" onClick={() => sopBtn(row, 0)} v-auth="TASKS_SEE">
                        查看
                    </ElButton>
                    <ElButton size="small" v-show={row.status == 1} onClick={() => sopBtn(row, 1)} v-auth="TASKS_EDIT">
                        编辑
                    </ElButton>
                    <ElButton size="small" onClick={() => sopBtn(row, 2)} v-auth="EXECUTION_DETAILS">
                        执行明细
                    </ElButton>
                    <ElButton size="small" onClick={() => sopBtn(row, 3)} v-auth="TASKS_STATISTC">
                        统计
                    </ElButton>
                    <ElButton
                        size="small"
                        v-show={row.object_type == 1 && (row.task_status == 3 || row.task_status == 6)}
                        onClick={() => sopBtn(row, 4)}
                        v-auth="CUE_TRASAN">
                        线索转化
                    </ElButton>
                </div>
            );
        }
    }
];
const sopBtn = (val: any, num: any) => {
    switch (num) {
        case 0: // 查看
            router.push(
                `/employee/employeetasks/taskmanage/createtask?val=${val.type}&id=${val.id}&cur=look&type=look`
            );
            break;
        case 1: // 编辑
            router.push(
                `/employee/employeetasks/taskmanage/createtask?val=${val.type}&id=${val.id}&cur=edit&type=edit`
            );
            break;
        case 2:
            executionRef.value.openDrawer(val);
            break;
        case 3:
            goTongji(val.id);
            break;
        case 4:
            cueInfoRef.value.openCue(val);
            break;
    }
};
const switchTab = (val: any, e: any) => {
    defaultParams.status = val;
    state.searchParams = defaultParams;
    state.searchParams = deepCopy(defaultParams);
    searchRef.value.reset();
    setTimeout(() => {
        getTablelen();
    }, 1000);
};
const search = v => {
    const params = {
        status: defaultParams.status,
        ...v
    };
    currentParams.value = params;
    state.searchParams = deepCopy(params);
};
const reset = v => {
    state.searchParams = deepCopy(defaultParams);
    currentParams.value = null;
};
const fetch = () => {
    // getTableH()
    return taskList;
};
const auditSet = () => {
    auditRef.value.appDialog.visible = true;
    auditRef.value.getauditView();
};
const handleClose = () => {
    isClose.value = !isClose.value;
    // getTableH()
};
const getTablelen = () => {
    if (tableRef.value.getTableTotal() > 0) {
        isClose.value = false;
    } else {
        isClose.value = true;
    }
};
// 表格的自适应高度
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
onMounted(() => {
    reSize(getTableH);
});
setTimeout(() => {
    getTablelen();
}, 2000);

onActivated((val: any) => {
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
});
</script>
<style lang="scss" scoped>
.taskstatiscal_container {
    height: calc(100vh - 142px);
    display: flex;
    flex-direction: column;

    .card {
        padding: 24px;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #fff;
    }

    .title-text {
        display: flex;
        justify-content: space-between;

        .title-desc {
            line-height: 25px;
        }

        .title-btn {
            padding-top: 0;
        }
    }

    .line {
        height: 1px;
        background-color: #ececec;
    }

    .new-task {
        display: flex;

        .task-item {
            width: 376px;
            height: 196px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            margin: 20px 20px 0 0;
            padding: 24px;

            .item-title {
                display: flex;
                justify-content: space-between;

                .title-left {
                    display: flex;

                    .task-img {
                        width: 40px;
                        height: 40px;
                        margin-right: 12px;
                    }

                    .task-text {
                        line-height: 40px;
                        font-weight: 500;
                        color: #33302d;
                    }
                }
            }

            .task-desc {
                font-size: 14px;
                line-height: 20px;
                box-sizing: border-box;
                margin-top: 16px;
                padding: 16px;
                width: 327px;
                height: 92px;
                background: #f9f9f9;
                font-weight: 400;
                color: #585858;
            }
        }
    }

    .conten-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-top: 16px;
        padding: 24px;
        padding-top: 10px;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #fff;

        .table-btn {
            margin-right: 10px;
        }

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    :deep .sopBtn {
        padding: 4px 16px 2px;
        margin: 3px;
        min-height: 0;
    }
}
</style>
